<template>
	<div class="company-resume">
		<!-- 应聘简历 -->
		<v-info></v-info>
		
		<div class="company-release-content">
			<div class="company-release-head flexBetween">
				<div class="company-release-search flexItems">
					<el-input v-model="positionName" :placeholder="$t('common.company.companytask3')"></el-input>
					<button class="zmlBtn1" @click="bindSearch">{{$t('common.company.search')}}</button>
				</div>
			</div>
			<div class="company-release-table">
				<table>
					<tr>
						<td>{{$t('common.company.resumeName')}}</td>
						<td>{{$t('common.company.resumePosition')}}</td>
						<td>{{$t('common.company.deliveryTime')}}</td>
						<td>{{$t('common.company.feedback')}}</td>
						<td>{{$t('common.company.operation')}}</td>
					</tr>
					<tr v-for="(item, index) in ypList" :key="index">
						<td class="ypInfo flexItems">
							<div class="ypInfo-photo"><img :src="imgUrl+item.talentResource.headPicture" alt=""></div>
							<div class="ypInfo-text">
								<p>{{item.talentResource.topUniversity}}</p>
								<p class="font12">
									{{item.talentResource.topEducationTxt}}
									<span v-if="item.talentResource.topEducationTxt">|</span>
									{{item.talentResource.schoolName}}
								</p>
								<p class="h99 font12">
									{{item.talentResource.telentTypeTxt}}   
									<span v-if="item.talentResource.telentTypeTxt">|</span>
									{{item.talentResource.jobTimeTxt}}{{$t('common.company.jobTime')}}
								</p>
							</div>
						</td>
						<td><router-link :to="'/vip/c_recruit_resume_detail?id='+item.userId" class="color1">{{item.talentResource.jobPosition}}</router-link></td>
						<td>{{item.createTime}}</td>
						<!-- 0-未反馈，1-感兴趣，2-不合适 -->
						<td>
							<template v-if="item.status == 0">{{$t('common.company.attitude0')}}</template>
							<template v-if="item.status == 1">{{$t('common.company.attitude1')}}</template>
							<template v-if="item.status == 2">{{$t('common.company.attitude2')}}</template>
						</td>
						<td>
							<span class="cz color1" @click="attitude({id:item.id,status:1})">{{$t('common.company.attitude1')}}</span>
							<span class="cz color3" @click="attitude({id:item.id,status:2})">{{$t('common.company.attitude2')}}</span>
						</td>
					</tr>
				</table>
			</div>
			<div class="company-release-page" v-if="full && total == 0">
				<el-pagination background
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					layout="prev, pager, next, total, jumper"
					:total="total">
				</el-pagination>
			</div>
		</div>
		
	</div>
</template>
<script>
import { ajaxBackAdd,ajaxAdd } from "@/utils/js.js";
import { getResume,resumeManage} from "@/services/api.js";
import info from '@/components/info.vue'
export default {
	components:{
		'v-info':info,
	},
	data(){
		return{
			rz: false, //是否认证
			input:'',			//搜索框
			currentPage: 1, 	//当前页
			pageSize: 10,  		//一页几条
			total: 0,			//总条数
			ypList:[],  		//招聘数据列表
			positionName:'',
			full:false,
			imgUrl:this.$store.state.imgUrl
		}
	},
	mounted(){
		this.getResumes()
	},
	methods:{
		// 搜索
		bindSearch(){
			this.getResumes()
		},
		// 页数改变时触发
		handleCurrentChange(val){
			console.log(`当前页: ${val}`);
			this.getResumes()
		},
		// 操作
		attitude(e){
			ajaxBackAdd(this,resumeManage,{id:e.id,status:e.status},res=>{
				this.$message({type: 'success',message: res.msg});
				this.ypList.find(n => n.id == e.id).status = e.status
			},err=>{})
		},
		//招聘简历
		getResumes(){
			let data = {
				"pageNo":this.currentPage,
				"pageSize": 10,
				"positionName": this.positionName
			}
			ajaxAdd(this,getResume,data,res=>{
				console.log('招聘简历',res)
				if(res.data && res.data.records){
					this.ypList = res.data.records;
					this.total = res.data.total;
					this.full = true
				}else{
					this.ypList = []
				}
				
			},err=>{})
		},
	}
}
</script>
<style lang="scss">
.company-resume{
	.company-release-content{
		width: 100%;
		margin-top: 12px;
		background-color: #fff;
		padding: 30px 20px;
		.company-release-search{
			width: 520px;
			height: 36px;
			margin-bottom: 30px;
			
			.el-input{
				flex: 1;
				height: 100%;
				input{height: 100%;border-radius: 0;}
			}
			button{
				outline: none;
				border: 0;
				height: 100%;
				width: 120px;
				cursor: pointer;
				letter-spacing: 3px;
			}
		}
		.company-release-page{
			margin-top: 30px;
			display: flex;
			justify-content: center;
		}
		.el-pagination.is-background .el-pager li:not(.disabled).active{
			background-color: #0F54BC;
		}
		.company-release-table{
			margin-top: 12px;
			table{
				width: 100%;
				text-align: center;
				color: #666;
				tr{
					border: 1px solid #EDEDED;
					height: auto;
					transition: .3s;
					.cz{
						margin: 0 10px;
						cursor: pointer;
					}
					td:nth-last-of-type(1){
						width: 250px;
					}
					td{
						padding: 20px 0;
					}
				}
				tr:nth-of-type(1){
					background-color: #F2F6FE;
					height: 50px;
					td:nth-of-type(1){
						text-align: left;
						padding-left: 32px;
						max-width: 250px;
					}
				}
				// tr:hover{
				// 	background-color: #f5f5f5;
				// }
			}
			
			.ypInfo{
				padding-left: 32px;
				.ypInfo-photo{
					width: 60px;
					height: 60px;
					overflow: hidden;
					img{width: 100%;}
				}
				.ypInfo-text{
					text-align: left;
					padding-left: 12px;
					p:nth-of-type(1){
						font-weight: bold;
					}
					p:nth-of-type(2){
						margin: 4px 0;
					}
				}
			}
		}
	}
	.color1{
		color: #0F54BC;
	}
	.color2{
		color: #FF7452;
	}
	.color3{
		color: #E81E19;
	}
}
</style>
